<template>
   <div class="mainlogin">
      <div class="wp">
        <div class="form-login">
          <div class="login-body fix">
            <div class="login-left">
              <div class="login-left-body">
                <div class="title">opc系统</div>
                <div class="tips">
                  <p>我们现在开始吧!</p>
                  <span>Let's start now</span>
                </div>
                <div class="img-car">
                  <!-- <img src="../assets/images/zp2.png" alt="" /> -->
                </div>
              </div>
            </div>
            <div class="login-right">
              <div class="title">
                <span>登录</span>
              </div>
              <form>
                <div class="login-form-body">
                  <div class="item">
                    <el-input
                      class="input input-usernme "
                      type="text"
                      placeholder="请输入账号"
                      v-model="userName"
                      @change="changeName"
                    />
                  </div>
                  <div class="item">
                    <div class="input-item">
                      <div class="user-password">
                        <el-input
                          type="password"
                          class="input input-usernme "
                          placeholder="请输入密码"
                          v-model="password"
                      @change="changePassword"
                        />
                        
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <!-- <label role="checkbox" class="Remember-user"> -->
                      <!-- <input type="checkbox" />
                      记住密码 -->
                    <!-- </label> -->
                  </div>
                  <div class="item item-submit">
                    <Button class="submit" @click="confirmLogin">
                      登录
                    </Button>
                  </div>
                  <div class="item">
                    <div class="tips">
                      <!-- 忘记密码？<a href="">联系管理员</a> -->
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import '../assets/css/login.css'
export default {
    data(){
        return{
userName:'',
password:''
        }
    },
    methods:{
        changeName(value){
            console.log(value)

        },
        changePassword(value){
            console.log(value)

        },
        confirmLogin(){
            if(this.userName=='admin'&&this.password=="admin123"){
                window.localStorage.setItem('userName',this.userName)
                this.$router.push('/')
            }else{
                this.$message.error('帐号或密码错误')
            }

        }

    }

}
</script>

<style   scoped>
.input>>>.el-input__inner{
    border: none;

}
.item-submit{
    width: 520px;
    text-align: center;
}

</style>